<template>
  <view style="position: relative;min-height: 114rpx" :style="{height:type==1?'170rpx':type==2?'146rpx':type==3?'146rpx':'122rpx'}">
    <view :class="(type!= 4 ) ?'background':''"></view>
    <div class="head" :class="type==1?'background1 ':type==2?'background2':type==3?'background3':'background4'">
      <div v-for="(promotion, promotion_index) in res" :key="promotion_index" style="position: relative">
        <div
            class="showBox"
            v-if="
          promotion.__key == 'SECKILL' ||
          promotion.__key == 'PINTUAN'
        "
        >
          <div v-if="promotion.__key == 'PINTUAN'" >
            <div  class="detail-pintuan">

              <div class="left" style="margin-right: 4rpx">
                ¥
              </div>
              <div class="left2">
                {{
                  $options.filters.goodsFormatPrice(
                      detail.price
                  )[0]
                }}
              </div>
              <div class="left3">
                .{{
                  $options.filters.goodsFormatPrice(
                      detail.price
                  )[1]
                }}
              </div>
              <div class="left4">
                拼团价
                <div class="inner">  ¥</div>
                <div class="inner2">   {{
                    $options.filters.goodsFormatPrice(
                        detail.promotionPrice
                    )[0]
                  }}</div>
                <div class="inner3">  .{{
                    $options.filters.goodsFormatPrice(
                        detail.promotionPrice
                    )[1]
                  }}</div>
              </div>
            </div>
            <div class="detail-pintuan-time">
              <view class="showBox_R" v-if="promotion && promotion.endTime">
                <div class="timetxt">{{getIsTimer(promotion)}}</div>
                <u-count-down
                    :hide-zero-day="true"
                    font-size="25"
                    color="#fff"
                    bg-color="#f71471"
                    separator-size="25"
                    separator-color="#f71471"
                    :show-hours="true"
                    :show-minutes="true"
                    :timestamp="getCountDownTime(promotion.endTime)"
                ></u-count-down>
              </view>
            </div>
          </div>
          <view class="group-wrapper">
            <div class="u-group-row">
              <view :span="8" class="showBox_L">
                <view class="u-group-flex">
                  <!-- 限时抢购 -->
                  <view class="u-group-flex-left" v-if="promotion.__key == 'SECKILL'">
                  <span
                      class="u-group-flex-left-span"
                      v-if="detail.promotionPrice != undefined"
                  >
                    ￥
                    <span class="flex-price">
                      {{ $options.filters.goodsFormatPrice(detail.promotionPrice)[0] }}.{{
                        $options.filters.goodsFormatPrice(detail.promotionPrice)[1]
                      }}</span
                    >
                  </span>
                    <view class="u-group-flex" v-if="detail.price != undefined">
                    <span class="old-price"
                    >￥{{ $options.filters.goodsFormatPrice(detail.price)[0] }}.{{
                        $options.filters.goodsFormatPrice(detail.price)[1]
                      }}</span
                    >
                      <view class="promotion">限时抢购</view>
                    </view>
                  </view>
<!--                  <view class="u-group-flex-left" v-if="promotion.__key == 'PINTUAN'">-->
<!--                  <span-->
<!--                      class="u-group-flex-left-span"-->
<!--                      v-if="detail.promotionPrice != undefined"-->
<!--                  >-->
<!--                    ￥<span class="flex-price">-->
<!--                      {{ $options.filters.goodsFormatPrice(detail.promotionPrice)[0] }}.</span-->
<!--                  >{{ $options.filters.goodsFormatPrice(detail.promotionPrice)[1] }}-->
<!--                  </span>-->
<!--                    <view class="u-group-flex" v-if="detail.price != undefined">-->
<!--                    <span class="old-price"-->
<!--                    >￥{{ $options.filters.goodsFormatPrice(detail.price)[0] }}.{{-->
<!--                        $options.filters.goodsFormatPrice(detail.price)[1]-->
<!--                      }}</span-->
<!--                    >-->
<!--                      <view class="promotion">拼团活动</view>-->
<!--                    </view>-->
<!--                  </view>-->
                  <!--  拼团右侧 -->
<!--                  <view class="u-group-flex-right" v-if="promotion.__key == 'PINTUAN'">-->
<!--                    <span class="group-bag">{{ promotion.requiredNum }}人拼团 </span>-->
<!--                    <span class="group-bag">限购{{ promotion.limitNum }}件</span>-->
<!--                  </view>-->
                </view>
              </view>
<!--              <view class="showBox_R" v-if="promotion && promotion.endTime">-->
<!--                <u-tag :text="getIsTimer(promotion)" size="mini" type="error" />-->
<!--                <u-count-down-->
<!--                    :hide-zero-day="true"-->
<!--                    font-size="25"-->
<!--                    color="#fff"-->
<!--                    bg-color="#f71471"-->
<!--                    separator-size="25"-->
<!--                    separator-color="#f71471"-->
<!--                    :show-hours="true"-->
<!--                    :show-minutes="true"-->
<!--                    :timestamp="getCountDownTime(promotion.endTime)"-->
<!--                ></u-count-down>-->
<!--              </view>-->
            </div>
          </view>
        </div>

      </div>
<!--      //普通-->
      <div v-if="type==1">
        <div  class="detail">
          <div class="left">
            ¥
          </div>
          <div class="left2">
            {{
              $options.filters.goodsFormatPrice(
                  detail.price
              )[0]
            }}
          </div>
          <div class="left3">
            .{{
              $options.filters.goodsFormatPrice(
                  detail.price
              )[1]
            }}
          </div>
        </div>
        <div class="detailTxt">泡泡国王会员价¥200 小可爱会员价¥2</div>
      </div>
    </div>

  </view>
</template>

<script>
export default {
  data() {
    return {
      type:1 // 1是默认商品详情 ，2是秒杀 ，3是团购 ,4是会员可以买
    };
  },
  props: {
    // 活动，促销数据
    res: {
      type: null,
      default: {},
    },
    // 商品详情
    detail: {
      type: null,
      default: {},
    },
  },
  watch: {
    res: {
      handler() {
        if (this.res && this.res.length != 0) {
          Object.keys(this.res).forEach((item) => {
            let key = item.split("-")[0];
            this.res[item].__key = key;
            // 针对现实向
          });
        }
      },
      immediate: true,
    },
  },
  mounted() {

    if(this.detail.promotionFlag==true){
      this.type = 4;
    }
    // 判断是否拼团活动或者秒杀 如果有则显示拼团活动信息
    this.res &&
    Object.keys(this.res).forEach((item) => {

      // 拼团商品
      if (item.indexOf("PINTUAN") == 0) {
       this.type = 3

      }

      // 秒杀
      if (item.indexOf("SECKILL") == 0) {
        this.type = 2
      }
    });
    console.log(this.res,'0000000',this.type);
  },
  methods: {
    getCountDownTime(val) {
      let date = new Date(val);
      let timeSimple = new Date(date).getTime() / 1000;
      return timeSimple - new Date().getTime() / 1000;
    },
    getIsTimer(val) {
      console.log(val,'vvvval')
      var timestamp = new Date().getTime();

      if (timestamp < val.start_time) {
        this.startTimer = true;
        console.log( "距活动开始")
        return "距活动开始";
      } else {
        console.log( "距活动开始")
        return "距活动结束";
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "./group.scss";
.head{
  width: 100%;
  //height: 30rpx;
  //background-color: yellow;
  position: absolute;
  left: 0 ;
  top: -30rpx;
  border-top-right-radius: 40rpx;
  border-top-left-radius: 40rpx;
  z-index: 1;
  padding-top: 30rpx;
}
.background{
  background-image: url("/static/detail/icon.png");
  width: 750rpx;
  height: 206rpx;
  position: absolute;
  background-size: 750rpx 206rpx;
  left: 0;
  top: -30rpx;
  z-index: 2;
}
.background1{

  background-image:  linear-gradient(to bottom, #C6FCE2 0%, #ECF9F5 100%),url("/static/detail/icon.png");
  background-size: 750rpx 219rpx,750rpx 219rpx;
  background-repeat: no-repeat;
  //background-color: black;
  width: 750rpx;
  height: 219rpx;
}
.background2{
  background-image: url("/static/detail/miaosha.png");
  background-size: 750rpx 206rpx;
    background-repeat: no-repeat;

}
.background3{
  background-image:  linear-gradient(to bottom, #FF1C48 0%, #FF3C61 100%),url("/static/detail/icon.png");
  background-size: 750rpx 206rpx;
  background-repeat: no-repeat;
  width: 750rpx;
  height: 206rpx;
}
.background4{
  background-image: url("/static/detail/miaosha.png");
  background-size: 750rpx 122rpx;
    background-repeat: no-repeat;
  background-color:#402D16;
  width: 750rpx;
  height: 122rpx;
}
.detail{
  width: 100%;
  height: 56rpx;

  color: #006645;
  margin-bottom: 24rpx;
  padding: 0 28rpx;
  display: flex;
  align-items: baseline;
  justify-content: start;
  .left{
    font-size: 34rpx;
  }
  .left2{
    font-size: 48rpx;
  } .left3{
      font-size: 34rpx;
    }

}
.detailTxt{
  width: 646rpx;
  height: 68rpx;
  border-radius: 12rpx;
  background-color: #006645;
  font-size: 24rpx;
  display: flex;
  justify-content: start;
  align-items: center;
  margin: 28rpx auto;
  padding: 0 24rpx;

  color: white;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.detail-pintuan{
  width: 100%;
  height: 56rpx;

  color: white;
  margin-bottom: 24rpx;
  padding: 0 28rpx;
  display: flex;
  align-items: baseline;
  justify-content: start;
  .left0{
    font-size: 24rpx;
  }
  .left{
    font-size: 34rpx;
  }
  .left2{
    font-size: 48rpx;
  }
  .left3{
      font-size: 34rpx;
    }
  .left4{
    //height: 56rpx;
    background-color: white;
    color: #FA2C19;
    display: flex;
    align-items: baseline;
    border-radius: 200px;
    margin-left: 6rpx;
    padding: 0 20rpx;
    font-size: 24rpx;
    .inner{
      font-size: 34rpx;
    }
    .inner2{
      font-size: 48rpx;
    }
    .inner3{
      font-size: 34rpx;
    }
  }

}
.detail-pintuan-time{
  .timetxt{
    margin-right: 6rpx;
  }
  font-size: 24rpx;
  padding: 0 28rpx;
  color: white;
  display: flex;
  align-items: center;
  justify-content: start;
}
</style>
